<template>
	<div class="layout-padding template-layout">
		<el-tabs class="demo-tabs" @tab-click="handleOrderStatusClick" v-model="tab">
			<template #default>
				<div class="flex flex-between ml15 mr15 header-section">
					<div class="flex-center sd-title">库存预警</div>
					<div class="flex flex-center-content">
						<div class="ml5">
							<el-button :icon="Refresh" @click="refresh"></el-button>
						</div>
						<div class="ml5">
							<el-button :icon="Search" @click="onOpenSearch"></el-button>
						</div>
					</div>
				</div>
				<!-- <div class="tab-content"> -->
				<el-tab-pane label="全部" name="all">
					<DataTable ref="DataTableRef"></DataTable>
				</el-tab-pane>
				<el-tab-pane label="已售罄" name="0">
					<DataTable ref="DataTableRef1"></DataTable>
				</el-tab-pane>
				<el-tab-pane label="预警中" name="1">
					<DataTable ref="DataTableRef2"></DataTable>
				</el-tab-pane>
				<!-- </div> -->
			</template>
		</el-tabs>
		<SearchDialog ref="SearchDialogRef"></SearchDialog>
	</div>
</template>

<script setup lang="ts">
import { Refresh, Search } from '@element-plus/icons-vue';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import DataTable from './dataTable.vue';
const SearchDialog = defineAsyncComponent(() => import('./searchDialog.vue'));
const SearchDialogRef = ref();
import type { TabPaneName } from 'element-plus';
const DataTableRef = ref();
const DataTableRef1 = ref();
const DataTableRef2 = ref();
const tab = ref('all');

const query: StockWarningQuerySearch = {};

const handleOrderStatusClick = (targetName: TabPaneName) => {
	const name = targetName.props.name;
	if (name == tab.value) {
		console.log('两次点击一个内容');
	} else {
		tab.value = name;
		tapChoice(name, query);
	}
};

const onOpenSearch = () => {
	SearchDialogRef.value.handleOpen();
};

const tapChoice = (name: string, query: StockWarningQuerySearch) => {
	switch (name) {
		case '0':
			query.warningStatus = '0';
			DataTableRef1.value.init(query);
			break;
		case '1':
			query.warningStatus = '1';
			DataTableRef2.value.init(query);
			break;
		default:
			console.log('查询全部。。。。');
			query.warningStatus = '';
			DataTableRef.value.init(query);
	}
};

const refresh = () => {
	tapChoice(tab.value, query);
};

onMounted(() => {
	tapChoice(tab.value, query);
});
</script>

<style scoped lang="scss">
.stock-warning-container {
	height: calc(100vh - 120px); // 减去外层layout的padding和margin
	flex-direction: column;
}

.demo-tabs {
	background: #fff;
	height: 100%;
	// display: flex;
	// flex-direction: column;
}

.header-section {
	flex-shrink: 0;
	height: 60px;
	align-items: center;
}

.tab-content {
	flex: 1;
	overflow: hidden;
}

:deep(.el-tabs__header) {
	padding-left: 10px;
	flex-shrink: 0;
}

:deep(.el-tabs__content) {
	padding: 0;
	height: 100%;
	overflow: visible;
}

:deep(.el-tab-pane) {
	height: 100%;
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}
</style>
